<template>
	<view :style="colorStyle">
		<view class="fixed-lt bg--w111-f5f5f5 w-full z-999 header_box" :style="{'padding-top': sysHeight + 'px'}">
			<view class="h-80 px-20 flex-y-center">
				<text class="iconfont icon-ic_leftarrow fs-40 text--w111-333" @click="goPage(3)"></text>
				<!--  #ifdef  MP-WEIXIN -->
				<view class="w-460 h-58 rd-30 bg--w111-fff flex-y-center px-32 ml-20">
				<!--  #endif -->
					<!--  #ifndef  MP-WEIXIN -->
					<view class="flex-1 h-58 rd-30 bg--w111-fff flex-y-center px-32 ml-20">
					<!--  #endif -->
						<text class="iconfont icon-ic_search fs-24 text--w111-999"></text>
						<input v-model="keyword" confirm-type="search" @focus="searchFocus" @confirm="inputConfirm"
							class="pl-18 flex-1 fs-24" placeholder="请输入商品名称" placeholder-class="text--w111-999" />
					</view>
				</view>
				<view class="h-100 w-full px-32 flex-between-center fs-26" v-show="!focus">
					<text :class="orderStatus === '' ? 'active' : ''" @click="statusClick('')">全部</text>
					<text :class="orderStatus === 0 ? 'active' : ''" @click="statusClick(0)">待付款</text>
					<text :class="orderStatus === 1 ? 'active' : ''" @click="statusClick(1)">待发货</text>
					<view class="relative">
						<text :class="orderStatus === 2 ? 'active' : ''" @click="statusClick(2)">待收货/核销</text>
						<uni-badge class="uni-badge-left-margin" v-if="orderData.received_count > 0"
							:text="orderData.received_count"></uni-badge>
					</view>
					<text :class="orderStatus === 3 ? 'active' : ''" @click="statusClick(3)">待评价</text>
				</view>
			</view>
			<view class="pt-32 pl-20 pr-20" :style="{'margin-top':marTop - 50 + 'px'}" v-show="focus">
				<view class="fs-28 text--w111-333 fw-500 lh-40rpx mb-24 acea-row row-between-wrapper">
					<view>历史搜索</view>
					<view class="iconfont icon-ic_delete text--w111-999 fs-28" @click="delHistory"></view>
				</view>
				<view class="flex flex-wrap">
					<text
						class="inline-block max-200 h-56 line1 lh-56rpx rd-28rpx  bg--w111-fff px-24 fs-24  text--w111-666 text-center mr-24 mb-16"
						v-for="(item,index) in historyList" :key="index" @click="goSearch(item)">{{item}}</text>
					<text </view>
				</view>
				<view class="px-20" :style="{'margin-top':marTop + 'px'}" v-show="!focus">
					<view class="order_card bg--w111-fff rd-24rpx pt-32 pb-32 pl-24 pr-24"
						v-for="(item, index) in orderList" :key="index"  @click="goOrderDetails(item.order_id)">
						<view class="flex-between-center">
							<view class="flex-y-center">
								店铺名称
								<text class="iconfont icon-ic_rightarrow fs-24 text--w111-999"></text>
								<!-- <text v-if="item.pink_name"
									class="h-32 bg--w111-fff px-6 rd-6rpx fs-20 border_con font-num acea-row row-middle">
									{{item.pink_name}}
									</text>
								<text class="fs-28 lh-40rpx text--w111-333 pl-16">{{item._add_time}}</text> -->
							</view>
							<view class="fs-26">
								<view class="font-num">
									<text>{{item._status._title}}</text>
									<text v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</text>
								</view>
							</view>
						</view>
						<view class="mt-26" v-if="item.cartInfo.length && item.cartInfo.length == 1">
							<view class="flex justify-between" v-for="(items, i) in item.cartInfo" :key="i">

								<easy-loadimage mode="widthFix" :image-src="items.productInfo.image" width="136rpx"
									height="136rpx" borderRadius="16rpx"></easy-loadimage>
								<view class="flex-1 ml-20 other_view">
									<view class="w-346 fs-28 fw-bold text--w111-333 lh-40rpx line2">
										{{items.productInfo.store_name }}
									</view>
									<view class="other">
										<view class="price">
											<view class="unit">￥</view>
											<view class="value">{{item.pay_price}}</view>
										</view>
										<view class="total">X{{item.total_num}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="mt-26 relative" v-if="item.cartInfo.length && item.cartInfo.length > 1">
							<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-560"
								show-scrollbar="false">
								<view class="inline-block mr-16" v-for="(items,i) in item.cartInfo" :key="i">
									<easy-loadimage mode="widthFix" :image-src="items.productInfo.image" width="136rpx"
										height="136rpx" borderRadius="16rpx"></easy-loadimage>
								</view>
							</scroll-view>
							<view class="abs-rt h-136 flex-col flex-center">
								<baseMoney :money="item.pay_price" symbolSize="20" integerSize="32" decimalSize="20"
									incolor="#333333" weight></baseMoney>
								<view class="fs-24 text--w111-999 lh-34rpx text-right">共{{item.total_num}}件</view>
							</view>
						</view>

						<view class="status_view">
							<view class="item" v-if="item._status._type == 0 || item._status._type == 9"
								@tap.stop="showModalChange(item.order_id, 3)">取消订单</view>
							<view class="item active" v-if="item._status._type == 0" @click.stop="goPay(item.order_id)">
								立即支付</view>
							<view class="item">查看物流</view>
							<view class="item active">确认收货</view>
							<view class="item" v-if="item._status._type == 3"
								@click.stop="goOrderDetails(item.order_id)">去评价</view>

						</view>

						<view class="mt-32 flex-between-center">
							<!-- <text class="fs-24 font-num" v-if="item._status._type == 0">{{item._status._msg}}</text> -->
							<text></text>
							<view class="flex">
								<view class=""></view>
								<view class="btn w-154 h-60 rd-16rpx flex-center fs-24 border_ccc"
									v-if="item._status._type == 0 || item._status._type == 9"
									@tap.stop="showModalChange(item.order_id, 3)">取消订单</view>
								<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
									v-if="item._status._type == 0" @click.stop="goPay(item.order_id)">立即支付</view>
								<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
									v-else-if="item._status._type == 3" @click.stop="goOrderDetails(item.order_id)">立即评价
								</view>
								<!-- <view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
						v-if="item._status._type == 4" @tap.stop="showModalChange(item.order_id, 2)">删除订单</view> -->
							</view>
						</view>
					</view>
					<block v-if="orderList.length == 0 && !loading">
						<emptyPage title="暂无订单信息～"
							:src="keyword ? '/statics/images/noSearch.gif' : '/statics/images/noOrder.gif'"></emptyPage>
					</block>
					<view class="loadingicon flex-center" v-if="orderList.length > 0">
						<text class="loading iconfont icon-ic_Refresh" :hidden="loading == false"></text>
						<text class="fs-26 pb-32">{{ loadTitle }}</text>
					</view>
				</view>
				<!-- 确认框 -->
				<tuiModal :show="showModal" :title="modalTitle" :content="modalContent" :maskClosable="false"
					@click="handleClick" @cancel="hideModal"></tuiModal>
			</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import {
		getOrderList,
		orderData,
		orderCancel,
		orderDel,
		orderPay
	} from '@/api/order.js';
	import {
		openOrderSubscribe
	} from '@/utils/SubscribeMessage.js';
	import home from '@/components/home';
	import tuiModal from "@/components/tui-modal/index.vue"
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import emptyPage from '@/components/emptyPage.vue';
	import colors from '@/mixins/color.js';
	import Loading from '@/components/Loading/index.vue'
	export default {
		components: {
			Loading,
			home,
			emptyPage,
			tuiModal
		},
		mixins: [colors],
		data() {
			return {
				sysHeight: sysHeight,
				loaded: false,
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				orderList: [], //订单数组
				orderData: {}, //订单详细统计
				orderStatus: '', //订单状态
				orderType: '', //订单类型
				page: 1,
				limit: 20,
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				keyword: '',
				marTop: 0,
				focus: false,
				// 搜索历史
				historyList: [],
				// 临时搜索列表
				tempStorage: [],
				//确认模态框
				showModal: false,
				modalTitle: '',
				modalContent: '',
				modalType: 0,
				orderId: ''

			};
		},
		computed: {
			...mapGetters(['isLogin']),
			fixedTop() {
				// #ifdef MP || APP-PLUS
				return this.sysHeight + 'px'
				// #endif
				return this.data
				// #ifndef MP
				return 0
				// #endif
			}
		},
		onShow() {
			uni.removeStorageSync('form_type_cart');
			this.page = 1;
			this.loadend = false;
			this.orderList = [];
			if (this.isLogin) {
				this.getFun();
			} else {
				toLogin()
			}
		},
		onPageScroll(object) {
			uni.$emit('scroll');
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			if (options.status) this.orderStatus = (options.status == undefined && options.status != 0) ? '' : parseInt(
				options.status);
			if (options.type) this.orderType = (options.type == undefined && options.type != 0) ? '' : parseInt(
				options.type);
			this.getMarTop();
		},
		methods: {
			delHistory() {
				this.tempStorage = []
				this.historyList = []
				uni.setStorageSync('orderHistoryList', this.tempStorage);
			},
			getFun() {
				this.getOrderData();
				this.getOrderList();
			},
			onLoadFun() {
				this.getFun();
				this.isShowAuth = false;
			},
			getMarTop() {
				let that = this;
				setTimeout(() => {
					// 获取小程序头部高度
					let info = uni.createSelectorQuery().in(this).select(".header_box");
					info.boundingClientRect(function(data) {
						that.marTop = data.height
					}).exec()
				}, 100)
			},
			/**
			 * 获取订单统计数据
			 *
			 */
			getOrderData: function() {
				let that = this;
				orderData({
					type: this.orderType,
					search: this.keyword
				}).then(res => {
					that.$set(that, 'orderData', res.data);
				});
			},
			showModalChange(orderId, type) {
				this.orderId = orderId;
				this.modalType = type;
				if (type == 1) {
					this.modalTitle = '确认收货';
					this.modalContent = '为保障权益，请收到货确认无误后，再确认收货';
				} else if (type == 2) {
					this.modalTitle = '删除订单';
					this.modalContent = '确定删除该订单?';
				} else if (type == 3) {
					this.modalTitle = '温馨提示';
					this.modalContent = '确认取消该订单?';
				}
				this.showModal = true;
			},
			handleClick(e) {
				let index = e.index;
				if (index == 1) {
					if (this.modalType == 1) {
						orderTake(this.orderId).then(res => {
							this.showModal = false;
							this.goSearch('');
							this.getOrderData();
						}).catch(err => {
							return this.$util.Tips({
								title: err
							});
						})
					} else if (this.modalType == 2) {
						orderDel(this.orderId).then(res => {
							this.showModal = false;
							this.goSearch('');
							this.getOrderData();
						})
					} else if (this.modalType == 3) {
						this.showModal = false;
						orderCancel(this.orderId).then(() => {
							this.goSearch('');
							this.getOrderData();
						})
					}
				} else {
					this.showModal = false;
				}

			},
			hideModal() {
				this.showModal = false;
			},
			/**
			 * 取消订单
			 *
			 */
			cancelOrder: function(index, order_id) {
				let that = this;
				if (!order_id)
					return that.$util.Tips({
						title: '缺少订单号无法取消订单'
					});
				orderCancel(order_id)
					.then(res => {
						return that.$util.Tips({
								title: res.msg,
								icon: 'success'
							},
							function() {
								that.orderList.splice(index, 1);
								that.$set(that, 'orderList', that.orderList);
								that.$set(that.orderData, 'unpaid_count', that.orderData.unpaid_count - 1);
								that.getOrderData();
							}
						);
					})
					.catch(err => {
						return that.$util.Tips({
							title: err
						});
					});
			},
			goPay: function(order_id) {
				uni.reLaunch({
					url: `/pages/goods/cashier/index?order_id=${order_id}&from_type=order`
				})
			},
			goOrderDetails: function(order_id) {
				if (!order_id)
					return that.$util.Tips({
						title: '缺少订单号无法查看订单详情'
					});
				// #ifdef MP
				uni.showLoading({
					title: '正在加载'
				});
				openOrderSubscribe()
					.then(() => {
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/goods/order_details/index?order_id=' + order_id
						})
					})
					.catch(err => {
						uni.hideLoading();
					});
				// #endif
				// #ifndef MP
				uni.navigateTo({
					url: '/pages/goods/order_details/index?order_id=' + order_id
				});
				// #endif
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (this.loading) return
				if (status === this.orderStatus) return;
				this.orderStatus = status;
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.getOrderList();
			},
			searchFocus() {
				try {
					this.historyList = []
					this.tempStorage = []
					let arr = uni.getStorageSync('orderHistoryList')
					if (arr.length > 0) {
						this.historyList = Array.from(new Set(arr))
					} else {
						this.historyList = []
					}

					this.tempStorage = this.historyList
				} catch (e) {}
				this.focus = true;
			},
			goSearch(keyword) {
				this.loadend = false;
				this.loading = false;
				this.keyword = keyword;
				this.page = 1;
				this.orderList = [];
				this.getOrderList();
			},
			inputConfirm() {
				this.loadend = false;
				this.loading = false;
				this.page = 1;
				this.orderList = [];
				this.getOrderData();
				this.getOrderList();
				setTimeout(e => {
					let arr = this.tempStorage;
					if (this.keyword !== '') {
						arr.unshift(this.keyword);
						this.tempStorage = [...Array.from(new Set(arr))];
						uni.setStorageSync('orderHistoryList', this.tempStorage);
					}
				}, 1000)
			},
			/**
			 * 获取订单列表
			 */
			getOrderList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '加载更多';
				getOrderList({
						status: that.orderStatus,
						type: that.orderType,
						page: that.page,
						limit: that.limit,
						search: this.keyword
					})
					.then(res => {
						let list = res.data || [];
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
						that.page = that.page + 1;
						that.focus = false;
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = '加载更多';
					});
			},

			/**
			 * 删除订单
			 */
			delOrder: function(order_id, index) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定删除该订单',
					success: function(res) {
						if (res.confirm) {
							orderDel(order_id)
								.then(res => {
									that.orderList.splice(index, 1);
									that.$set(that, 'orderList', that.orderList);
									that.$set(that.orderData, 'unpaid_count', that.orderData
										.unpaid_count - 1);
									that.getOrderData();
									return that.$util.Tips({
										title: '删除成功',
										icon: 'success'
									});
								})
								.catch(err => {
									return that.$util.Tips({
										title: err
									});
								});
						} else if (res.cancel) {
							return that.$util.Tips({
								title: '已取消'
							});
						}
					}
				});

			},
			goPage(type, url) {
				if (type == 1) {
					uni.navigateTo({
						url
					})
				} else if (type == 2) {
					uni.switchTab({
						url
					})
				} else if (type == 3) {
					uni.navigateBack();
				}

			},
		},
		onReachBottom: function() {
			this.getOrderList();
		}
	};
</script>

<style scoped lang="scss">
	.other_view {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.other {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.price {
			display: flex;
			align-items: baseline;

			.unit {
				font-size: 24rpx;
				color: #333333;
			}

			.value {
				font-size: 40rpx;
				color: #333333;
			}
		}

		.total {
			font-size: 28rpx;
			color: #777777;
		}
	}

	.status_view {
		display: flex;
		justify-content: flex-end;

		.item {
			width: 152rpx;
			height: 60rpx;
			font-size: 24rpx;
			color: #777777;
			border: 1rpx solid #CCCCCC;
			box-sizing: border-box;
			border-radius: 16rpx;
			margin-left: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&.active {
				color: #FFFFFF;
				background: linear-gradient(131deg, #FF8133 0%, #FF8133 100%);
				border: none;
			}
		}
	}

	.border_con {
		border: 1px solid var(--view-theme);
	}

	.border_ccc {
		border: 1rpx solid #ccc;
	}

	.active {
		color: var(--view-theme);
		font-weight: 500;
		font-size: 30rpx;
	}

	.abs-rt {
		position: absolute;
		top: 0;
		right: 0;
	}

	.order_card~.order_card {
		margin-top: 20rpx;

	}

	.btn~.btn {
		margin-left: 16rpx;
	}

	.uni-badge-left-margin {
		position: absolute;
		top: -16rpx;
		right: -30rpx;

		/deep/ .uni-badge--error {
			background-color: var(--view-theme) !important;
		}

		.uni-badge {
			color: var(--view-theme);
			border: 1px solid var(--view-theme);
			z-index: 29;
		}
	}
</style>